Array.prototype.map() |
您所在的位置:网站首页 › index return › Array.prototype.map() |
(受到这篇博文的启发) 通常情况下,我们使用只有一个参数(即正在遍历的元素)的回调函数。尽管某些函数可以接受额外的可选参数,但在实际应用中,我们通常只传递一个参数。这种习惯可能会导致一些令人困惑的现象。 考虑下例: js["1", "2", "3"].map(parseInt);我们期望输出 [1, 2, 3], 而实际结果是 [1, NaN, NaN]. parseInt 函数通常只使用一个参数,但其实可以传入两个参数。第一个参数是表达式,第二个参数是解析该表达式的基数。当在 Array.prototype.map 的回调函数中使用 parseInt 函数时,map 方法会传递 3 个参数: 元素 索引 数组parseInt 函数会忽略第三个参数,但是不会忽略第二个参数!这可能会导致一些问题。 以下是迭代步骤的简明示例: js// parseInt(string, radix) -> map(parseInt(value, index)) /* 第一次迭代 (index 是 0): */ parseInt("1", 0); // 1 /* 第二次迭代 (index 是 1): */ parseInt("2", 1); // NaN /* 第三次迭代 (index 是 2): */ parseInt("3", 2); // NaN下面让我们来讨论解决方案: jsconst returnInt = (element) => parseInt(element, 10); ["1", "2", "3"].map(returnInt); // [1, 2, 3] // 实际结果是一个数字数组(如预期) // 与上面相同,但使用简洁的箭头函数语法 ["1", "2", "3"].map((str) => parseInt(str)); // [1, 2, 3] // 实现上述目标更简单的方法,同时避免了“骗招”: ["1", "2", "3"].map(Number); // [1, 2, 3] // 但与 parseInt() 不同,Number() 还会返回一个浮点数或(解析)指数表示法: ["1.1", "2.2e2", "3e300"].map(Number); // [1.1, 220, 3e+300] // 为了进行比较,如果我们对上面的数组使用 parseInt(): ["1.1", "2.2e2", "3e300"].map((str) => parseInt(str)); // [1, 2, 3]使用 parseInt 作为参数调用 map 方法,输出运行如下: jsconst strings = ["10", "10", "10"]; const numbers = strings.map(parseInt); console.log(numbers); // 根据以上描述,[10, NaN, 2] 的实际结果可能会出乎意料。 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |